<template>
    <div class="blank"></div>
    <Cell title="设置主页" :value="pForm.data.pageIndex || '请选择要设置的主页'" @click="onShowPages">
        <template #extra v-if="pForm.data.pageIndex"> <span class="textbutton" style="margin-left: 6px;"
                @click.stop="onSetPage({ selectedValues: [''] })">取消</span></template>
    </Cell>
    <Cell title="黑暗模式" class="theme-toggle">
        <Switch v-model="sIsDarkStore.isDark" size="small" @change="toggleDarkMode"></Switch>
    </Cell>
    <div class="blank"></div>
    <groupList :instance="group"></groupList>
    <div class="blank"></div>
    <Button @click="onLogout" size="large">退出登录</Button>
    <Popup :show="IndexShow" position="bottom" @click-overlay="IndexShow = false">
        <Picker :columns="pForm.pages" @confirm="onSetPage" @cancel="IndexShow = false"></Picker>
    </Popup>
</template>
<script lang="ts" setup>
import { adminStore, navBarStore, isDarkStore } from '@b/store';
import { Button, Cell, Popup, Picker, Switch } from "vant";
import groupList from "@b/srcm/components/group/group_list.vue";
import { AccountGroupList, UserSelfForm } from "@b/index/account";
import { ref } from 'vue';

const sadminStore = adminStore()
const snavBarStore = navBarStore()
const sIsDarkStore = isDarkStore()
const pForm = new UserSelfForm()
const group = new AccountGroupList()
//请求不需要id，设置id只是防止报错
pForm.id = 1
const IndexShow = ref(false);
(async () => {
    await pForm.setData()
    snavBarStore.setNavBar(pForm.data.name || '')
})()
const onShowPages = async () => {
    await pForm.getPages()
    IndexShow.value = true
}
const onSetPage = async ({ selectedValues }: { selectedValues: string[] }) => {
    await pForm.setPageIndex('/' + selectedValues[0])
    pForm.setData()
    IndexShow.value = false
}
const onLogout = () => {
    sadminStore.logOut()
}

const toggleDarkMode = () => {
    sIsDarkStore.change()
}
</script>